<template>
	<view>
		<view class="top">
			<view class="search">
				<uni-easyinput class="innersearch" prefixIcon="search" v-model="inputvalue" placeholder="搜索" @iconClick="iconClick"></uni-easyinput>
			</view>
		</view>

		<view class="content">
			
			<uni-data-select class="select" v-model="value" :localdata="range" @change="change"></uni-data-select>
			
			<navigator class="a" url="/pages/index/maintenanceDetail/maintenanceDetail">
				<view class="right">
					<image src="@/static/article01.png" mode=""></image>
				</view>
				<view class="mid">
					<view class="title">
						<view class="name">伟业汽车保养厂（人民路店）</view>
						<view>556m</view>
					</view>
					<view class="rate">
						<uni-rate v-model="rateValue" :readonly="true"  @change="onChange" />
						<text>3分</text>
						<text>销量：322</text>
					</view>
					<view class="bhours">营业时间:周一至周五 早上8:00-晚上22:00</view>
					<view class="local">中原区莲花街32号</view>
				</view>
			</navigator>
			<navigator class="a" url="/pages/index/maintenanceDetail/maintenanceDetail">
				<view class="right">
					<image src="@/static/article01.png" mode=""></image>
				</view>
				<view class="mid">
					<view class="title">
						<view class="name">伟业汽车保养厂（人民路店）</view>
						<view>556m</view>
					</view>
					<view class="rate">
						<uni-rate v-model="rateValue" :readonly="true"  @change="onChange" />
						<text>3分</text>
						<text>销量：322</text>
					</view>
					<view class="bhours">营业时间:周一至周五 早上8:00-晚上22:00</view>
					<view class="local">中原区莲花街32号</view>
				</view>
			</navigator>
			<navigator class="a" url="/pages/index/maintenanceDetail/maintenanceDetail">
				<view class="right">
					<image src="@/static/article01.png" mode=""></image>
				</view>
				<view class="mid">
					<view class="title">
						<view class="name">伟业汽车保养厂（人民路店）</view>
						<view>556m</view>
					</view>
					<view class="rate">
						<uni-rate v-model="rateValue" :readonly="true"  @change="onChange" />
						<text>3分</text>
						<text>销量：322</text>
					</view>
					<view class="bhours">营业时间:周一至周五 早上8:00-晚上22:00</view>
					<view class="local">中原区莲花街32号</view>
				</view>
			</navigator>
			<view class="more">暂无更多</view>
		</view>
	</view>
</template>

<script>
	import dropdownFilter from '@/components/ay-dropdown-filter/ay-dropdown-filter.vue'
export default {
	data() {
		return {
			rateValue: 0,
			value: 0,
			range: [
				{ value: 0, text: '综合排序' },
				{ value: 1, text: '距离最近' },
				{ value: 2, text: '评分最高' },
				{ value: 2, text: '销量最高' }
			]
		};
	},
	onLoad() {
		// 模拟动态赋值
		setTimeout(() => {
			this.rateValue = 3;
		}, 1000);
	},
	methods: {
		onChange(e) {
			console.log('rate发生改变:' + JSON.stringify(e));
			// console.log(this.rateValue);
		},
		toggle(type) {
			this.type = type;
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type);
		},
		dialogClose() {
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.close();
		},
		change(e) {
			console.log('e:', e);
		}
	},
	components:{
		   dropdownFilter,
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.top {
	display: flex;
}
.search {
	width: 100%;
	height: 45px;
	background-color: #efeff5;
}
.innersearch {
	width: 365px;
	height: 28px;
	margin: 4px 6px 4px 4px;
}

.select {
	width: 80px;
	margin: 10px 2px;
}

.content {
	width: 372px;
	height: 120px;
	/* border: 1px solid #f2f2f2; */
	/* border-bottom: 1px solid #f2f2f2; */
	margin: 3px auto;
	background-color: #fff;
}

.mid {
	margin-left: 60px;
}
.title {
	display: flex;
}
.title view:nth-child(2) {
	margin-top: 15px;
	color: #0055ff;
}
.a {
	display: flex;
	border-bottom: 1px solid #f2f2f2;
}

.name {
	/* width: 130px; */
	height: 25px;
	margin-top: 15px;
	font-size: 14px;
	font-weight: bold;
	margin-left: 10px;
}

.local {
	/* margin-top: 8px; */
	margin-left: 10px;
	font-size: 12px;
}
.bhours {
	font-size: 12px;
	margin-left: 10px;
}
.right {
	width: 50px;
	height: 90px;
	color: #0055ff;
	margin-top: 10px;
}


.right image{
	width: 100px;
	height: 90px;
	margin-left: 10px;
	/* margin-top: 10px; */
}
.rate {
	display: flex;
	margin-left: 10px;
}
.rate text {
	margin-left: 10px;
}
.rate text:nth-child(3) {
	font-size: 12px;
}
.popup {
	text-align: center;
}

.popupone {
	margin-top: 20px;
}
.popupt {
	height: 50px;
	line-height: 50px;
	border-top: 1px solid #f2f2f2;
}
.more{
	text-align: center;
	font-size: 15px;
	margin-top: 10px;
}
</style>
